<template>
  <div class="article-container">
    <!-- 卡片布局 -->
    <el-card class="box-card">
      <!-- 头部- div作为header的具名插槽插入el-card组件内-顶部一条 -->
      <div
        slot="header"
        class="clearfix"
      >
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 卡片布局-表单 -->
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <!-- 第一行 -->
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 第二行 -->
        <el-form-item label="频道">
          <el-select
            v-model="form.channel_id"
            placeholder="请选择频道"
          >
            <el-option label="全部"></el-option>
            <el-option
              v-for="obj in channelList"
              :key="obj.id"
              :value="obj.id"
              :label="obj.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 第三行 -->
        <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="开始日期"
              style="width: 100%"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              v-model="form.begin_pubdate"
            ></el-date-picker>
          </el-col>
          <el-col
            class="line"
            :span="2"
          >-</el-col>
          <el-col :span="11">
            <el-date-picker
              placeholder="结束时间"
              style="width: 100%"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              v-model="form.end_pubdate"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="chaxunFn"
            :loading="load"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <!-- 卡片头部导航 -->
      <div
        slot="header"
        class="clearfix"
      >根据筛选条件查询到{{total}}条数据：</div>
      <!-- 卡片正文表格
        data对应 数据数组(里面都得是对象格式)
        prop: 对应对象的哪个key-值会显示在当前单元格里
       -->
      <!-- 表格 -->
      <el-table
        ref="data"
        :data="tableData"
        v-loading="load"
        style="width: 100%"
      >
        <el-table-column
          prop="cover"
          label="封面"
          width="180"
        >
          <template v-slot="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover.images[0]"
              :fit="cover"
              lazy
            >
              <div
                slot="placeholder"
                class="image-slot"
              >
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>

        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180"
        >

        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0">草稿</el-tag>
            <el-tag
              v-else-if="scope.row.status === 1"
              type="info"
            >待审核</el-tag>
            <el-tag
              v-else-if="scope.row.status === 2"
              type="success"
            >审核通过</el-tag>
            <el-tag
              v-else-if="scope.row.status === 3"
              type="warning"
            >审核失败</el-tag>
            <el-tag
              v-else-if="scope.row.status === 4"
              type="danger"
            >已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="pubdate"
          label="时间"
        > </el-table-column>
        <el-table-column
          prop=""
          label="操作"
        >
          <template v-slot="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
              circle
              @click="hEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="hDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @current-change="changePage"
        :current-page="reqArticle.page"
        :disabled="load"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
  <!-- 文章列表下部表格 -->
  <!-- 卡片布局 -->
  <!-- 卡片布局-下面内容区域 -->

</template>

<script>
import { getchannelAPI, getArticleAPI } from '@/api'
export default {
  name: 'articleList',
  data () {
    return {
      load: true,
      form: {
        status: null,
        channel_id: null,
        begin_pubdate: null,
        end_pubdate: null
      },
      channelList: [], // 频道列表
      tableData: [], // 数据列表
      total: 0, // 后台数据总量
      reqArticle: [{
        page: 1, // 默认显示第一页
        per_page: 10 // 每页显示10条
      }
      ]
    }
  },

  methods: {

    chaxunFn () { // 查询按钮  点击事件
      this.reqArticle.page = 1
      this.getArticleFn()
    },

    hEdit (index, obj) { // 编辑事件
      this.$router.push(
        {
          path: '/layout/articleAdd',
          query: {
            id: obj.id
          }

        })
    },
    hDelete (index, obj) {

    },
    changePage (page) {
      // console.log(page)
      this.getArticleFn()
      this.reqArticle.page = page
    },

    async getArticleFn () { // 拿文章列表的方法
      this.load = true// 开启加载时loading
      const articleRes = await getArticleAPI(Object.assign({}, this.form, this.reqArticle))
      // console.log(articleRes)
      this.tableData = articleRes.data.data.results // 获取频道数据
      this.total = articleRes.data.data.total_count// 数据总量保存到total
      this.load = false // 加载完成之后loading
    }

  },

  async created () {
    const res = await getchannelAPI()
    // console.log(res)
    this.channelList = res.data.data.channels
    this.getArticleFn()// 网页打开的时候触发created 调用一次文章获取
  }

}
</script>

<style scoped lang='less'>
</style>
